<template>
    <view class="app-diy-m-goods-list" :style="{backgroundColor: backgroundColor, padding: `${cPaddingTop}rpx 0`}">
        <view class="m-diy-list__box dir-top-nowrap" :style="{padding: `0 ${cPaddingLr}rpx`}">
            <view class="m-label box-grow-0 dir-left-nowrap cross-center main-between"
                  :style="{borderRadius: `${cBorderTop}px ${cBorderTop}px 0 0`,background: 'linear-gradient(to right, ' + mBgColor +', '+ ( mBgType === 'gradient' ?  mBgGradientColor:  mBgColor) + ')'}">
                <view class="box-grow-0 dir-left-nowrap cross-center">
                    <view class="title" :style="{color: mColor}">{{ mTitle }}</view>
                    <template v-if="tempData.open_date || after_title">
                        <view class="desc">{{ timer_text }}</view>
                        <view :style="{color: mTitleSecondColor}" v-if="after_title" class="desc">{{ after_title }}</view>
                        <view v-if="timer" class="time dir-left-nowrap cross-center">
                            <view class="box main-center cross-center"
                                  :style="{color: mTimeColor,backgroundColor:mTimeBgColor}">{{ timer.hour }}
                            </view>
                            <view :style="{color: mTitleSecondColor}" class="colon main-center cross-center">:</view>
                            <view class="box main-center cross-center"
                                  :style="{color: mTimeColor,backgroundColor:mTimeBgColor}">{{ timer.min }}
                            </view>
                            <view :style="{color: mTitleSecondColor}" class="colon main-center cross-center">:</view>
                            <view class="box main-center cross-center"
                                  :style="{color: mTimeColor,backgroundColor:mTimeBgColor}">{{ timer.sec }}
                            </view>
                        </view>
                    </template>
                </view>
                <view :style="{color: mTitleSecondColor}" class="m-label-right box-grow-0 dir-left-nowrap cross-center" @click="jumpMore">
                    <view>更多</view>
                    <i class="iconfont icon-right">&#xe7eb;</i>
                </view>
            </view>
            <view class="m-goods" :style="{backgroundColor:mGoodsBgColor,borderRadius: `0 0 ${cBorderBottom}px ${cBorderBottom}px`,}">
                <scroll-view v-if="tempData.list && tempData.list.length" scroll-x>
                    <view class="dir-left-nowrap" id="swipe-left-right">    
                        <app-goods
                          v-for="(goods,idx) in tempData.list" :key="goods.id"
                          :theme="theme"
                          :index="idx"
                          :no_extra="true"
                          :goods="goods"
                          :listStyle="0"
                          :showGoodsName="showGoodsName"
                          :showGoodsTag="showGoodsTag"
                          :goodsTagPicUrl="goodsTagPicUrl"
                          :showProgressBar="showProgressBar"
                          :isUnderLinePrice="isUnderLinePrice"
                          :showGoodsPrice="showGoodsPrice"
                          :scrollWidth="304"
                          :c_border_top="16"
                          :c_border_bottom="16"
                        ></app-goods>
                    </view>
                </scroll-view>
                <view v-else class="empty cross-center dir-left-wrap">
                    <view class="empty-bg"></view>
                    <view class="empty-text">{{ signAlone.empty_title }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {mapGetters, mapState} from "vuex";
import appPrice from "../../page-component/goods/app-price.vue";
import appGoods from "../../basic-component/app-goods/app-goods.vue";
import appGoodsTimer from "./app-goods-timer.vue";
import appDiyCompositionImage from './app-diy-composition-image';

export default {
    name: "app-diy-m-goods-list",
    components: {
        'app-price': appPrice,
        'app-goods-timer': appGoodsTimer,
        appDiyCompositionImage,
        appGoods
    },
    props: {
        cBorderBottom: [Number,String],
        cBorderTop: [Number,String],
        cPaddingLr: [Number,String],
        cPaddingTop: [Number,String],
        cPaddingBottom: [Number,String],
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        mTitle: String,
        mColor: {
            type: String,
            default: '#FFFFFF',
        },
        mTitleSecondColor: {
            type: String,
            default: '#FFFFFF',
        },
        mBgType: {
            type: String,
            default: 'gradient',
        },
        mBgColor: {
            type: String,
            default: '#FF366F',
        },
        mBgGradientColor: {
            type: String,
            default: '#FF4242',
        },
        mTimeColor: {
            type: String,
            default: '#353535',
        },
        mTimeBgColor: {
            type: String,
            default: '#FFFFFF',
        },
        mGoodsBgColor: {
            type: String,
            default: '#FFE7E7',
        },
        showProgressBar: {
            type: [Boolean, String],
            default: false,
        },
        showGoodsName: {
            type: [Boolean, String],
            default: true,
        },
        showGoodsPrice: {
            type: [Boolean, String],
            default: true,
        },
        showGoodsTag: {
            type: [Boolean, String],
            default: false,
        },
        customizeGoodsTag: {
            type: [Boolean, String],
            default: '#FFFFFF',
        },
        goodsTagPicUrl: {
            type: String,
            default: '',
        },
        isUnderLinePrice: {
            type: [Boolean, String],
            default: true,
        },
        backgroundColor: {
            type: String,
            default: '#FFFFFF',
        },
        sign: String,
        theme: Object,
        mData: Object,
    },
    data() {
        return {
            timer: null,
            timer_text: '',

            tempData: this.mData,
            after_title: '',
            mTimeIntegral: null,
        };
    },
    watch: {
        mData: {
            handler: function (data) {
                this.tempData = data;
            },
            immediate: true,
        },
    },
    computed: {
        ...mapState({
            appImg: state => state.mallConfig.__wxapp_img.mall,
            appSetting: state => state.mallConfig.mall.setting,
            platform: function (state) {
                return state.gConfig.systemInfo.platform;
            }
        }),
        ...mapGetters('mallConfig', {
            getVideo: 'getVideo'
        }),
        newData() {
            return this.list;
        },
        signAlone() {
            switch (this.sign) {
                case 'miaosha':
                    return {
                        'sign': this.sign,
                        'title': '秒杀',
                        'empty_title': '暂无秒杀活动',
                        'more_url': '/plugins/miaosha/advance/advance',
                    }
                case 'flash-sale':
                    return {
                        'sign': this.sign,
                        'title': '限时抢购',
                        'empty_title': '暂无抢购活动',
                        'more_url': '/plugins/flash_sale/index/index',
                    }
                default:
                    break;
            }
        },
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                if (this.signAlone.sign === 'miaosha') {
                    this.sTime();
                }
                if (this.signAlone.sign === 'flash-sale') {
                    this.fTime();
                }
            })
        })
    },
    beforeDestroy() {
        clearInterval(this.mTimeIntegral);
    },
    methods: {
        // 是否展示会员价
        isShowMemPrice(goods) {
            return goods.is_level === 1 && goods.is_negotiable !== 1 && (goods.level_price > 0 || goods.level_price == 0) ? 1 : 0;
        },
        // 是否展示超级会员价
        isShowVip(goods) {
            return goods.vip_card_appoint && goods.vip_card_appoint.discount > 0 && goods.is_negotiable !== 1 ? 1 : 0;
        },
        // 是否展示售罄
        isShowStock(goods) {
            return this.appSetting.is_show_stock === 1 && goods.goods_stock === 0 ? 1 : 0;
        },
        set_time(time_at) {
            clearInterval(this.mTimeIntegral);
            let timer = new Date(time_at.replace(/-/g, '/'));
            this.now_time(timer);
            this.mTimeIntegral = setInterval(() => {
                this.now_time(timer);
            }, 1000);
        },
        now_time(timer) {
            let time = timer.getTime() - new Date().getTime();
            if (time < 0) {
                clearInterval(this.mTimeIntegral);
            }
            let hou = parseInt((time / 1000 / 60 / 60));
            let min = parseInt((time / 1000 / 60) % 60);
            let sec = parseInt((time / 1000) % 60);
            this.timer = {
                hour: hou < 10 ? "0" + hou : hou,
                min: min < 10 ? "0" + min : min,
                sec: sec < 10 ? "0" + sec : sec
            };
        },

        fTime() {
            if (this.tempData.activity) {
                this.after_title = '距结束';
                this.set_time(this.tempData.activity.end_at);
            } else if (this.tempData.next_activity) {
                this.after_title = '距开始';
                //TODO ddddddd待优化
                if (this.tempData.next_activity && this.tempData.next_activity.start_at) {
                    this.set_time(this.tempData.next_activity.start_at);
                }
            }
        },
        sTime() {
            let timenow = new Date();//获取当前时间
            if ((new Date(this.tempData.open_date)).getDate() != timenow.getDate()) {
                this.timer_text = '预告 ' + this.tempData.open_date + ' ' + this.tempData.open_time + '点场';
            } else if (this.tempData.open_time != timenow.getHours()) {
                this.timer_text = '预告 ' + this.tempData.open_time + '点场';
            } else {
                this.timer_text = this.tempData.open_time + '点场';
                let timelog = this.tempData.date_time * 1000 - timenow.getTime();
                this.mTimeIntegral = setInterval(() => {
                    timelog -= 1000;
                    if (timelog <= 0) {
                        clearInterval(this.mTimeIntegral);
                        return;
                    }
                    let hour = parseInt((timelog / 1000 / 60 / 60));
                    let min = parseInt((timelog / 1000 / 60) % 60);
                    let sec = parseInt((timelog / 1000) % 60);
                    this.timer = {
                        hour: hour < 10 ? "0" + hour : hour,
                        min: min < 10 ? "0" + min : min,
                        sec: sec < 10 ? "0" + sec : sec
                    };
                }, 1000);
            }
        },
        jumpMore() {
            uni.navigateTo({
                url: this.signAlone.more_url,
            });
        },
        jump(data) {
            let isNav = false;
            // #ifdef MP-ALIPAY || MP-WEIXIN || MP-TOUTIAO
            isNav = true;
            // #endif

            // #ifdef H5 || MP-BAIDU
            isNav = false;
            // #endif
            if (isNav && data.video_url && this.getVideo == 1) {
                uni.navigateTo({
                    url: `/pages/goods/video?goods_id=${id}&sign=${data.sign}`
                });
            } else {
                uni.navigateTo({
                    url: data.page_url
                });
            }
        },
        isShowOriginalPrice(goods) {
            return this.isUnderLinePrice && goods.original_price && this.showGoodsPrice && goods.is_negotiable !== 1;
        },
    }
}
</script>

<style scoped lang="scss">
.app-diy-m-goods-list {
    padding: 20px 0;

    .m-diy-list__box {
        padding: 0 #{20rpx};

    }

    .m-label {
        width: 100%;
        height: #{80rpx};
        padding: 0 #{24rpx};
        border-radius: #{16rpx} #{16rpx} 0 0;

        .title {
            font-size: #{28rpx};
        }

        .desc {
            color: #ffffff;
            font-size: #{24rpx};
            margin-left: #{20rpx};
        }

        .time {
            margin-left: #{12rpx};
            height: 40rpx;
            .colon {
                color: #ffffff;
                width: #{22rpx};
            }

            .box {
                font-size: 28rpx;
                height: #{40rpx};
                padding: 0 #{4rpx};
                border-radius: #{4rpx};
                background: #FFFFFF;
            }
        }

        .m-label-right {
            font-size: #{26rpx};
            color: #FFFFFF;
            .icon-right {
                font-size: 20rpx;
                margin-left: 10rpx;
            }
        }
    }

    .m-goods {
        padding: #{20rpx} #{24rpx};
        width: 100%;
        overflow-x: hidden;
        border-radius: 0 0 #{16rpx} #{16rpx};

        scroll-view {
            white-space: nowrap;
        }

        .empty {
            background: #FFFFFF;
            padding: 0 #{56rpx};
            border-radius: #{16rpx};
            height: #{180rpx};
            margin-right: #{20rpx};

            .empty-bg {
                background-image: url("../../../static/image/icon/empty.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                height: #{100rpx};
                width: #{100rpx}
            }

            .empty-text {
                margin-left: #{54rpx};
                font-size: #{28rpx};
                color: #353535;
            }
        }
    }
}
// #ifdef MP-BAIDU
#swipe-left-right {
    width: 750upx;
    height :100%;
}
// #endif
//#ifdef MP-BAIDU || MP-TOUTIAO
@font-face {
  font-family: 'iconfont';  /* Project id 1819490 */
  src: url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.woff2?t=1628318185237') format('woff2'),
       url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.woff?t=1628318185237') format('woff'),
       url('https://at.alicdn.com/t/font_1819490_uvhnc7hoy3.ttf?t=1628318185237') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:12px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
// #endif
</style>
